<template>
  <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" />

  <van-search v-model="sousval" shape="round" placeholder="请输入搜索关键词" />

  <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
    description="空空如也" v-show="kongStatus"/>

    <div class="box">
      <van-cell-group v-for="item in qsearchApiData">
  <van-cell :title="item.goods_name" />
</van-cell-group>
    </div>

    <div class="history" v-show="historyStatus">
      <div class="his">
        <h4>历史搜索</h4>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
      </div>
      <div class="hot">
        <h4>热门搜索</h4>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
      </div>
    </div>
</template>

<script setup>

 import {ref,watch} from 'vue'
   import {qsearchApi} from '@/api/api'
   import _ from 'lodash'
   let qsearchApiData=ref([])
  let sousval=ref('')
   let historyStatus=ref(true)
   let kongStatus=ref(false)


watch(sousval,_.debounce((val)=>{
console.log(val.length);
if(val.length==0){
  historyStatus.value=true
  kongStatus.value=false
}
else{
  historyStatus.value=false

  qsearchApi(val).then(res=>{
console.log('宫格',res);
qsearchApiData.value=res.data.message
if(res.data.message.length==0){
  kongStatus.value=true
}
else{
   kongStatus.value=false
}
 })
}
}),3000)
</script>

<style>

</style>